<template>
  <div class="comment">
    <div class="head-line">
      <div class="avatar-part">
        <el-avatar size="small" shape="square" :size="50" :src="comment.avatar_url"></el-avatar>
        <div class="user-link">
          <router-link :to="`/app/user_info/${comment.user_id}/Answer`">{{comment.nickname}}</router-link>
        </div>
      </div>
      <div class="time-part">{{comment.create_time}}</div>
    </div>
    <div class="comment_wrap">
      <div class="comment_content">
        <p>{{comment.comment_content}}</p>
      </div>
      <MessageOptionLine
          :reply-message="{comment_id: comment.comment_id, userto_userId: comment.user_id, userto_nickname: comment.nickname}"
          :by-login-user="comment.byLoginUser"
          @reply="updateReplies"
          @delete="handleDeleteComment"
      ></MessageOptionLine>
    </div>
    <div class="dialog_list" v-if="comment.replies !== []">
      <div class="one_reply" v-for="reply in comment.replies">
        <CommentReply
            :reply="reply"
            :comment_id="comment.comment_id"
            @reply="updateReplies"
            @delete-reply="updateReplies"
        ></CommentReply>
      </div>
    </div>
  </div>
</template>

<script>
import CommentReply from "@/components/CommentReply";
import MessageOptionLine from "@/components/MessageOptionLine";
import {deleteComment, getCommentReplies} from "@/network/comment";
import {ElMessage, ElMessageBox} from "element-plus";
export default {
  name: "Comment",
  components: {MessageOptionLine, CommentReply},
  props: {
    comment: {
      type: Object,
      default: {
        comment_id: 0, // 评论id
        user_id: 0,    // 评论的用户id
        nickname: "nickname", // 评论的用户的用户昵称
        avatar_url: "http://localhost/web-course-backend/photo/defualt.jfif", // 用户头像url
        comment_content: "评论内容",  // 评论内容
        create_time: "xxxx-xx-xx",    // 评论创建时间
        byLoginUser: "0",           // 这条评论的创建用户是否是当前登录用户
        replies: [] // 评论的回复信息
      }
    }
  },
  emits: ["deleteComment"],
  setup(props, context) {
    const updateReplies = ()=> {
      getCommentReplies(props.comment.comment_id).then(res=> {
        props.comment.replies = res.data;
      })
    }

    const handleDeleteComment = ()=> {
      ElMessageBox.confirm(
        '你确定要删除这条评论吗？',
        'Warning',
        {
          confirmButtonText: 'OK',
          cancelButtonText: 'Cancel',
          type: 'warning',
        }
      )
      .then(() => {
        deleteComment(props.comment.comment_id).then(res=> {
          ElMessage({
            type: 'success',
            message: '评论删除成功！',
            duration: 1000
          });
          // 发出信号请父元素处理
          context.emit("deleteComment");
        })
      })
      .catch(() => { })
    }

    return {
      updateReplies,
      handleDeleteComment
    }
  }
}
</script>

<style scoped lang="scss">
@import "../assets/scss/common";

p {
  margin: 0;
}

.user-link {
  margin-left: 10px;
  font-size: 18px;
  font-weight: bold;
  //a {
  //  color: #006ae8;
  //}
}

.comment {
  //padding-bottom: 15px;
  .head-line {
    padding: 10px 15px 5px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    .avatar-part {
      display: flex;
      flex-direction: row;
      align-items: center;
    }
    .time-part {
      font-size: 14px;
      color: #8590a6;
    }
  }

  .comment_wrap {
    padding: 0 15px 0 52px;

    .comment_content {
      p {
        line-height: 1.6;
      }
    }
  }

  .dialog_list {
    padding-top: 10px;
    margin-left: 50px;
    margin-right: 15px;
    .one_reply {
      border-top: 1px solid #f1f3f4;
    }
  }
}
</style>
